<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="用户名">
            <span>{{ props.row.username }}</span>
          </el-form-item>
          <el-form-item label="信息编号">
            <span>{{ props.row.id }}</span>
          </el-form-item>
          <el-form-item label="信息类型">
            <span>{{ props.row.kind }}</span>
          </el-form-item>
          <el-form-item label="电话">
            <span>{{ props.row.phone }}</span>
          </el-form-item>
          <el-form-item label="整租/合租">
            <span>{{ props.row.isjoint }}</span>
          </el-form-item>
          <el-form-item label="最短租期">
            <span>{{ props.row.lease }}</span>
          </el-form-item>
          <el-form-item label="合租要求">
            <span>{{ props.row. requirement}}</span>
          </el-form-item>
          <el-form-item label="家具家电">
            <span>{{ props.row.funiture }}</span>
          </el-form-item>
          <el-form-item label="产权">
            <span>{{ props.row.rights }}</span>
          </el-form-item>
          <el-form-item label="朝向">
            <span>{{ props.row.orentation }}</span>
          </el-form-item>
          <el-form-item label="户型">
            <span>{{ props.row.type }}</span>
          </el-form-item>
          <el-form-item label="楼层">
            <span>{{ props.row.floor }}层 </span>
          </el-form-item>
          <el-form-item label="装修情况">
            <span>{{ props.row.decoration }}</span>
          </el-form-item>
          <el-form-item label="有无电梯">
            <span>{{ props.row.elevator }}</span>
          </el-form-item>
          <el-form-item label="建筑面积">
            <span>{{ props.row.area }}平方米</span>
          </el-form-item>
          <el-form-item label="发布时间">
            <span>{{ props.row.date }}</span>
          </el-form-item>
          <el-form-item label="位置">
            <span>{{ props.row.location }}</span>
          </el-form-item>
          <el-form-item label="总价">
            <span>{{ props.row.price }}元</span>
          </el-form-item>
          <el-form-item label="照片">
            <span>{{ props.row.picture }}</span>
          </el-form-item>
          <el-form-item label="其他信息">
            <span>{{ props.row.other }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="信息编号"
      prop="id">
    </el-table-column>
    <el-table-column
      label="用户名"
      prop="username">
    </el-table-column>
    <el-table-column
      label="发布时间"
      prop="date">
    </el-table-column>
              <el-table-column width="120"><template slot-scope="scope">
            <el-button @click="banUser(scope.$index,scope.row)" type="danger"
          round>封禁用户</el-button>
            </template>
    </el-table-column>
    <el-table-column width="120"><template slot-scope="scope" >
            <el-button type="warning" round @click="banInfo(scope.$index,scope.row)">删除信息</el-button>
          </template>
    </el-table-column>
    <el-table-column
      align="right"
      width="200">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索" @input="Inputchange(scope)"/>
      </template>
    </el-table-column>
    <el-table-column
      align="right"
      width="100">
      <template slot="header">
        <el-button size="mini" @click="Search()">搜索</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

<script>
import axios from 'axios'
import store from '../../store'
  export default {
    name:'houseInfo',
    store,
    mounted(){
      var that = this;
      that.$axios.get('http://172.23.144.125:8081/house/v1/otherinfo/'+store.state.id+'/'+store.state.token)
      .then(res=>{
        if(res.data.code=='200'){
          that.tableData=res.data.datas;
        }
      })
    },
    methods:{
      Search(){
          var that = this;
          that.$axios.post('http://172.23.144.125:8081/house/v1/info1/'+store.state.id+'/'+store.state.token,{
              title:that.search
          }).then(res=>{
        if(res.data.code=='200'){
          that.tableData=res.data.datas;
        }
      })
      },
      Inputchange() {
        this.$set(this.search)
      },
      open() {
        this.$alert(this.messages.message, '提示', {
          confirmButtonText: '确定',
          type: 'success'
        })},
      open1() {
        this.$alert(this.messages.message, '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        })},
      banUser(index,rows){
        var that = this;
        that.$axios.put('http://172.23.144.125:8081/house/v1/users/'+store.state.id+'/'+store.state.token,{
          username:(index,rows).username
        }).then(res=>{
          if(res.data.code==200){
            that.messages.message='已封禁该用户';
            that.open();
          }
          else{
            that.messages.message='封禁失败';
            that.open1();
          }
        })
      },
      banInfo(index,rows){
        var that = this;
        that.$axios.delete('http://172.23.144.125:8081/house/v1/info/'+store.state.id+'/'+store.state.token+'/'+(index,rows).id,{
        }).then(res=>{
          if(res.data.code=='200'){
            that.messages.message='信息删除成功';
            that.tableData.splice(index, 1);
            that.open();
          }
          else{
            that.messages.message='信息删除失败';
            that.open1();
          }
        })
      },
    },
    data() {
      return {
        tableData: [{
        }],
        search:'',
      }
    }
  }
</script>